<template>
  <div class="main">
    <div class="top">
      <div class="noPass" :id="(selecteFirst?'topSelected':'')" @click="clickFirst"><div class="text">未通过<span v-if="nopassNum">({{nopassNum}})</span></div></div>
      <div class="passed" :id="(!selecteFirst?'topSelected':'')" @click="clickSecond"><div class="text">已通过<span v-if="passedNum">({{passedNum}})</span></div></div>
      <div class="finish" @click="clickClean">
<!--        <img src="../../assets/img/icon/uploader_file_btn_clean_s.png">-->
        <div :class="(this.$store.state.fileState ? 'state1': 'state2')"></div>
        <span :id="(this.$store.state.fileState ? '': 'noclear')">{{(this.$store.state.fileState ? '完成': '清理')}}</span>
      </div>
    </div>
    <router-view class="route"></router-view>
<!--    删除弹窗-->
    <div class="deletWindow" v-if="showDeletWindow">
      <img src="../../assets/img/icon/virtual-reality.svg">
      <p>是否确认删除</p>
      <div class="deletBottomBar">
        <div id="no" @click="noDo">取消</div>
        <div id="yes" @click="doIt">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'File2',
  data () {
    return {
      selecteFirst: true
      // nopassNum: 382,
      // passedNum: 1024
      // showDeletWindow: true
    }
  },
  methods: {
    clickFirst: function () {
      this.$router.push({
        name: 'Enopass'
      })
      this.selecteFirst = true
    },
    clickSecond: function () {
      this.$router.push({
        name: 'Epassed'
      })
      this.selecteFirst = false
    },
    clickClean: function () {
      var flag = this.$store.state.fileState
      this.$store.commit('setFileState', !flag)
    },
    noDo: function () {
      this.$store.commit('changeCoverableState', false)
      this.$store.commit('setShowDeletWindow', false)
    },
    doIt: function () {
      this.$store.commit('setAction', 'file2')// 一次异步
      this.$store.commit('changeCoverableState', false)
      this.$store.commit('setShowDeletWindow', false)
    }
  },
  computed: {
    showDeletWindow: function () {
      return this.$store.state.showDeletWindow
    },
    nopassNum: function () {
      return this.$store.state.Enumber.nopassNum
    },
    passedNum: function () {
      return this.$store.state.Enumber.passedNum
    }
  }
}
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
    overflow: hidden;
  }
.top{
  width: 100%;
  height: px2rem(44);
  position: fixed;
  background:rgba(255,255,255,1);
  font-size:px2rem(14);
  font-family:PingFang SC;
  font-weight:500;
  line-height:px2rem(20);
  display: flex;
  white-space: nowrap;
  .text{
    position: relative;
    top: px2rem(-2);
  }
  .noPass{
    width: px2rem(88);
    height: 100%;
    margin-left: px2rem(46);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .passed{
    width: px2rem(88);
    height: 100%;
    margin-left: px2rem(46);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .finish{
    width: px2rem(64);
    height: 100%;
    margin-left: px2rem(31);
    display: flex;
    img{
      width: px2rem(13);
      height: px2rem(16);
      margin-left: px2rem(12);
      margin-top: px2rem(16);
    }
    .state1{
      width: px2rem(13);
      height: px2rem(16);
      margin-left: px2rem(12);
      margin-top: px2rem(16);
      background: url("../../assets/img/icon/uploader_file_btn_clean_s.png");
      background-size: 100% 100%;
    }
    .state2{
      width: px2rem(13);
      height: px2rem(16);
      margin-left: px2rem(12);
      margin-top: px2rem(16);
      background: url("../../assets/img/icon/uploader_file_btn_clean_n.png");
      background-size: 100% 100%;
    }
    span{
      margin-left: px2rem(5);
      margin-top: px2rem(14);
      color:rgba(254,201,6,1);
    }
    #noclear{
      color:rgba(0,0,0,1);
    }
  }
  #topSelected{
    color:rgba(2,164,237,1);
    background: url("../../assets/img/icon/personal_file_Sbar.png");
    background-size: 100% 100%;
  }
}
  .route{
    width: 100%;
    height: px2rem(565);
    overflow: auto;
    position: relative;
    top: px2rem(44);
  }
  .deletWindow{
    width: px2rem(280);
    height: px2rem(350);
    float: left;
    position: absolute;
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    bottom: px2rem(158);
    z-index: 3;
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31) px2rem(31) px2rem(31) px2rem(31);
    img{
      margin-top: px2rem(26);
      margin-left: px2rem(72);
      width: px2rem(136);
      height: px2rem(150);
    }
    p{
      margin-top: px2rem(22);
      margin-left: px2rem(56);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
      opacity:1;
    }
    .deletBottomBar{
      width: 100%;
      height: px2rem(70);
      background:rgba(241,241,241,1);
      opacity:1;
      border-radius:0 0 px2rem(31) px2rem(31);
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #yes{
        width: px2rem(80);
        height: px2rem(44);
        margin-right: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,#59C2FF, #9D6AE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
        border-radius: px2rem(31);
      }
      #no{
        width: px2rem(80);
        height: px2rem(44);
        margin-left: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: #F84545;
        border-radius: px2rem(31);
      }
    }
  }
</style>
